<template>
  <el-menu :collapse="collapse" :default-active="activeIndex" :unique-opened="true" background-color="#f1f2f3" text-color="#515365" active-text-color="#409EFF">
    <el-submenu :index="String(item.id)" :key="index" v-for="(item, index) in side">
      <div slot="title">
        <i class="sideIcon" :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </div>
      <template v-if="Array.isArray(item.nodes)">
        <template v-for="config in item.nodes">
          <el-menu-item :index="String(config.id)" @click="router(config)" v-if="config.nodes == null"><span></span>{{ config.name }}
          </el-menu-item>
          <el-submenu :index="String(config.id)" v-if="Array.isArray(config.nodes)">
            <div slot="title">{{ config.name }}</div>
            <template v-for="con in config.nodes">
              <el-menu-item :index="String(con.id)" :key="con.id" @click="router(con,config)" v-if="con.nodes == null"><span></span>{{
                      con.name
                  }}
              </el-menu-item>
              <template v-if="Array.isArray(con.nodes)">
                <el-submenu :index="String(con.id)">
                  <div slot="title">{{ con.name }}</div>
                  <el-menu-item :index="String(i.id)" :key="i.id" @click="router(i,con,config)" v-for="i in con.nodes">{{ i.name }}
                  </el-menu-item>
                </el-submenu>
              </template>
            </template>
          </el-submenu>
        </template>
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>

export default {
  name: 'sideNav',
  props: ['side'],
  data() {
    return {
      collapse: false,
      activeIndex: ''
    }
  },
  methods: {
    router(node1,node2,node3) {
      // xxx 调整菜单路由地址
      this.$router.push('/' + node1.url)
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
